<template>
  <div class="container">
    <div class="main">
      <ranking-list-item
        style="width: 100%"
        v-for="item in rankingList"
        :key="item.index"
        :head_image="item.head_image"
        :index="item.index"
        :limit="limit"
        :nickname="item.nickname"
        :tomato="item.tomato"
      />
    </div>
    <div class="my-linking">
      <ranking-list-item
        style="width: 100%"
        :head_image="head_image"
        :index="myRank"
        :limit="limit"
        :nickname="nickname"
        :tomato="tomato"
      />
    </div>
  </div>
</template>

<script>
import RankingListItem from "../../../components/RankingListItem.vue";
import { getRankingList } from '../../../api/ranking';
export default {
  name: "linking-list",
  mounted() {
      getRankingList(this.limit)
        .then(data => {
            const { success, rankingList, selfIndex } = data.data;
            if (success) {
                this.rankingList = rankingList;
                this.myRank = selfIndex;
            }
        })
  },
  data() {
    return {
      limit: 10,
      rankingList: [],
      myRank: -1,
    };
  },
  computed: {
      tomato() {
          return this.$store.state.tomato;
      },
      nickname() {
          return this.$store.state.nickname;
      },
      head_image() {
          return this.$store.state.head_image;
      }
  },
  components: {
    RankingListItem,
  },
};
</script>

<style scoped>
.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  background: #f8f8f8;
}
.container > .main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: 160rpx;
}
.container > .my-linking {
  width: 100%;
  height: 160rpx;
  background: #ffa500;
  position: fixed;
  bottom: 0;
}
</style>